<script lang="ts" setup>
import type { TopAgent } from "../composables/useDataReport"

interface Props {
  data: TopAgent[]
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
})

// 获取排名显示
function getRankDisplay(rank: number) {
  return rank.toString()
}

// 获取排名样式
function getRankClass(rank: number, badge?: string) {
  if (badge === "golden") return "rank-golden"
  if (badge === "silver") return "rank-silver"
  if (badge === "bronze") return "rank-bronze"
  return "rank-normal"
}

// 获取行样式
function getRowClass(index: number) {
  return index < 3 ? "top-three" : ""
}
</script>

<template>
  <div class="top-agents-list">
    <CardHeader title="代理商绩效排行" />

    <div class="list-content" v-loading="loading" style="touch-action: auto;">
      <div
        v-for="(agent, index) in data"
        :key="agent.rank"
        class="agent-item"
        :class="getRowClass(index)"
      >
        <div class="agent-rank">
          <span
            class="rank-badge"
            :class="getRankClass(agent.rank, agent.badge)"
          >
            {{ getRankDisplay(agent.rank) }}
          </span>
        </div>

        <div class="agent-info">
          <div class="agent-name">{{ agent.name }}</div>
          <div class="agent-stats">
            <span class="stat-item">
              {{ agent.userCount }}个用户
            </span>
            <span class="stat-divider">·</span>
            <span class="stat-item">
              {{ agent.contentCount }}条内容
            </span>
          </div>
        </div>

        <!-- 排名指示器 -->
        <div class="rank-indicator">
          <div class="progress-bar">
            <div
              class="progress-fill"
              :style="{
                width: `${(agent.contentCount / data[0].contentCount) * 100}%`,
                backgroundColor: index === 0 ? '#f59e0b' : index === 1 ? '#6b7280' : index === 2 ? '#cd7f32' : '#e5e7eb',
              }"
            />
          </div>
        </div>
      </div>

      <!-- 空状态 -->
      <div v-if="!loading && data.length === 0" class="empty-state">
        <el-empty description="暂无代理商数据" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.top-agents-list {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;

  &:hover {
    box-shadow: var(--el-box-shadow-lighter);
    border-color: var(--el-border-color);
  }

  .list-content {
    flex: 1;
    padding: 16px 24px;
    overflow-y: auto;

    .agent-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--el-border-color-extra-light);
      transition: all 0.2s ease;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background-color: var(--el-fill-color-light);
        border-radius: 6px;
        padding-left: 8px;
        margin-left: -8px;
        padding-right: 8px;
        margin-right: -8px;
      }

      // 前三名样式稍微调整
      &.top-three {
        padding: 14px 0;

        .agent-name {
          font-weight: 500;
        }
      }

      .agent-rank {
        margin-right: 16px;
        flex-shrink: 0;

        .rank-badge {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          font-size: 14px;
          font-weight: 600;

          &.rank-golden,
          &.rank-silver,
          &.rank-bronze,
          &.rank-normal {
            background-color: var(--el-fill-color);
            color: var(--el-text-color-secondary);
            font-size: 14px;
            border: 1px solid var(--el-border-color-lighter);
          }

          // 前三名稍微突出，但保持简洁
          &.rank-golden {
            background-color: var(--el-color-warning);
            color: var(--el-color-white);
            font-weight: 600;
          }

          &.rank-silver {
            background-color: var(--el-text-color-secondary);
            color: var(--el-color-white);
            font-weight: 600;
          }

          &.rank-bronze {
            background-color: var(--el-color-info);
            color: var(--el-color-white);
            font-weight: 600;
          }
        }
      }

      .agent-info {
        flex: 1;
        min-width: 0;

        .agent-name {
          font-size: 14px;
          color: var(--el-text-color-primary);
          margin-bottom: 4px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .agent-stats {
          display: flex;
          align-items: center;
          font-size: 12px;
          color: var(--el-text-color-secondary);

          .stat-item {
            white-space: nowrap;
          }

          .stat-divider {
            margin: 0 6px;
            color: var(--el-border-color);
          }
        }
      }

      .rank-indicator {
        flex-shrink: 0;
        width: 60px;
        margin-left: 12px;

        .progress-bar {
          height: 4px;
          background-color: var(--el-fill-color);
          border-radius: 2px;
          overflow: hidden;

          .progress-fill {
            height: 100%;
            border-radius: 2px;
            transition: width 0.3s ease;
          }
        }
      }
    }

    .empty-state {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 200px;
      color: var(--el-text-color-placeholder);
    }
  }
}

// 加载状态样式
:deep(.el-loading-mask) {
  border-radius: 8px;
}
</style>
